<template>
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>
      <img :src="banner1" alt="">
    </swiper-slide>
    <swiper-slide>
      <img :src="banner2" alt="">
    </swiper-slide>
    <swiper-slide>
      <img :src="banner3" alt="">
    </swiper-slide>


    <!-- Optional controls -->
<!--    <div class="swiper-pagination" ></div>-->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>

  import banner1 from '../../assets/img/b1.jpg'
  import banner2 from '../../assets/img/b2.jpg'
  import banner3 from '../../assets/img/b3.jpg'


    export default {
        name: "MySwiper",
      data() {
        return {
          swiperOption: {
            // some swiper options/callbacks
            // 所有的参数同 swiper 官方 api 参数
            // ...
            loop:true,
            pagination: {
              el: '.swiper-pagination',
            },


          },
          banner1,
          banner2,
          banner3
        }

      },
    }
</script>

<style scoped>

</style>
